<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vconsole.min.js"></script>
		<style>
			.mat10{
				margin-top: 10px;
			}
			
			.mal20{
				margin-left: 20px;
			}
			.column{
				width: 125px;
				display: flex;
				flex-direction: column;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<student :key="item.name" v-for="(item,index) in stuList" :intro="item"></student>
			<!-- <student v-for="(item,index) in stuList" :intro="item"></student> -->
			<div class="column">
				<button class="mat10" @click="addStu">小明加入到队伍中</button>
				<button class="mat10" @click="delStu">移除第三个学生</button>
				<button class="mat10" @click="givePrizes">给第三个人发奖</button>
			</div>
		</div>
		<script type="text/javascript">
			var vConsole = new VConsole();
			//定义组件
			Vue.component('student', {
				template: '<div>姓名：{{intro.name}}<span v-if="intro.prizes">，{{intro.prizes}}</span></div>',
				props: {
					intro: Object //基本信息
				},
				data() {
					return {}
				},
				watch: {
					intro: function(newVal, oldVal) {
						console.log("更新 ：" + oldVal.name + "--->" + newVal.name);
					}
				},
				created: function() {
					console.log("创建 ：", this.intro.name);
				}
			})
			// 创建实例
			var app = new Vue({
				el: '#app',
				data() {
					return {
						stuList: [{
								name: '张三'
							},
							{
								name: '李四'
							}, {
								name: '王五'
							}, {
								name: '赵六'
							}, {
								name: '毛七'
							}
						]
					}
				},
				computed: {},
				methods: {
					addStu() {
						//在王五的前面插入小明
						this.stuList.splice(2, 0, {
							name: '小明'
						})
					},
					delStu() {
						//删除第3个学生
						this.stuList.splice(2, 1);
					},
					/**
					 * 给队伍的第三个人发奖
					 */
					givePrizes() {
						//修改数组第3项
						this.$set(this.stuList[2], `prizes`, "三号学生");
					}
				}
			});
		</script>
	</body>
</html>
